有別於我們之前提到的 Class 有點像我們自定義將元素分組，偽類是依照該元素的特殊狀態進行分類，並以 : 為前綴符號在 CSS 中進行選擇，例如 a:visited{} 是指使用者已點選過的 a 標籤。在偽類選擇器中有很多不同的特殊狀態，而這些狀態又依性質分為動態偽類、目標偽類、語言偽類等等，接下來就讓我們一一介紹吧！
偽類的寫法為
選擇器:偽類，:符號與偽類間不可空格，且偽類不可單獨存在，必須與其他選擇器一起使用
動態偽類是指透過使用者與網頁互動的狀態而產生的偽類類別，例如滑鼠移動到某元素時，該元素會擁有 hover 這個偽類。
| 選擇器 | 作用 | 常用於 | 搭配元素 |
|---|---|---|---|
:link |
未訪問過的連結 | 超連結未被訪問時的顏色 | 只能用於 a 連結相關元素 |
:visited |
已訪問過的連結 | 已訪問的連結呈灰色 | 只能用於 a 連結相關元素 |
:hover |
滑鼠懸在至元素上時 | 滑鼠滑過按鈕或超連結的效果 | 可用於所有元素 |
:active |
點該擊元素時 | 點擊時的效果 | 可用於所有元素 |
:focus |
該元素被 focus 時 | 表單元素擁有焦點時的效果 | 只能用於表單輸入類元素 |
語法：
Doris
a:link { /* 未點過的 a 標籤連結 */
屬性名: 屬性值;
}
a:visited { /* 已點過的 a 標籤連結 */
屬性名: 屬性值;
}
a:hover { /* 滑鼠停在 a 元素上方時 */
屬性名: 屬性值;
}
a:active { /* 滑鼠點擊 a 元素時 */
屬性名: 屬性值;
}
a:focus { { /* 網頁焦點在 a 元素時 */
屬性名: 屬性值;
}
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link {
color: blue;
}
a:visited {
color: gray;
}
a:hover {
color: green;
}
a:active {
color: red;
}
</style>
</head>
<body>
<a href="https://tw.news.yahoo.com/">看新聞</a>
</body>
</html>
在這個範例中，使用者的行為造成元素偽類發生改變：
:link 狀態
<a> 上，元素同時擁有 :link 及 :hover 狀態
<a> 但未放開，觸發 :active，同時擁有 :link、:hover、:active 狀態
:link、:hover 狀態
:visited 狀態
在使用動態偽類時因為經常出現某同時擁有多種狀態的情況(如上範例)，所以我們需要特別注意 CSS 中樣式的先後順序，避免出現衝突。
在動態偽類中，若需要同時設定多個樣式，建議以
:link、:visited、:hover、:active為順序
範例 ( :focus )：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input:focus {
background-color: yellowgreen;
}
</style>
</head>
<body>
<h3>很多 input 框</h3>
<input type="text"><br/><br/>
<input type="text"><br/><br/>
<input type="text">
</body>
</html>
上一篇：[快速入門前端 12] CSS 選擇器 (2) 複合選擇器 — 後代選擇器及兄弟選擇器
下一篇：[快速入門前端 14] CSS 選擇器 (4) Pseudo-Classes 偽類 - 結構偽類
系列文章列表：[快速入門前端] 系列文章索引列表
iThome鐵人賽
看影片追技術